<template>
    <div class = "home-recommond">
        <div class="wrapper" ref="wrapper">
        <ul class="content" ref="content">
            <li v-for="(item,index) in listData" :key="index"
              >
                <div class="cover">
                    <van-image :src = "item.img1v1Url" radius="1rem"/>
                </div>
                <spen>{{item.name}}</spen>
            </li>
        </ul>
        </div>
    </div>
</template>

<script>
import { betterScrollHorizontal } from "../../common/betterScroll.js";

export default {
    data(){
        return{
            listData:[]
        }
    },
    created(){
        this.getSongListData()
    },
    methods:{
        getSongListData(){
            this.$request('get','/artist/list')
            .then(res=>{
                console.log(res)
                if(res.code == 200){
                    this.listData = res.artists;
                }
                betterScrollHorizontal(
                    this,
                    this.$refs.wrapper,
                    this.$refs.content,
                    this.listData.length,
                    10
                );
        //         this.betterScrollHorizontal(this.listData.length,10);
        //     });
        // },
        // betterScrollHorizontal(num, itemWidth){
        //     this.$refs.content.style.width = num * itemWidth + "rem";
        //         this.$nextTick(() => {
        //             this.scroll = new BScroll(this.$refs.wrapper, {
        //                 scrollY:false,
        //                 scrollX:true,
        //                 startX:0,
                    });
                        
    },

},
    // filters:{
    //     numFilter(value,num){
    //         return parseFloat(value/10000).toFixed(num)
    //     }
    // }
};
</script>

<style scoped>
/* .home-recommond>ul{
    display: flex;
    flex-wrap: wrap;
}
.home-recommond>ul>li{
    width: calc((100% - 1rem) / 3 * 1);
}
.home-recommond>ul>li:nth-of-type(3n+2){
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}
.cover{
    position: relative;
}
.cover>span{
    position: absolute;
    right: 0;
    bottom: 0.4rem;
    background-color: brown;
} */
.wrapper {
    width: 100%;
    overflow: hidden;
}
/* ul.content {
    width: calc(12 * 10rem);
} */
ul.content li {
    display: inline-block;
    width: 10rem;
    vertical-align: top;
}
ul.content li > span {
    font-size: 0.8rem;
    color:#54493b;
}
ul.content li *{
    margin: 0.1rem;
}
</style>
